<template>
  <div class="centent">
    <div style="background-color: #FFFFFF;">
      <div class="ipt_box">
        <el-input v-model="input1" placeholder="请输入名称" clearable style="width: 20%;margin-left: -0.9%;" />
        <el-input v-model="input2" placeholder="请输入发起人" clearable style="width: 20%;margin-left: 2%;" />
        <el-button style="margin-left: 2%;" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
      </div>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="date" label="操作" width="300">
          <template slot-scope="scope">
            <el-button type="text" @click="track(scope.row,scope.$index)">跟踪</el-button>
            <el-button v-if="scope.row.endTime.length<4" type="text" @click="over(scope.row,scope.$index)">终止</el-button>
            <el-button v-if="scope.row.endTime.length<4 && scope.row.suspensionState == 1?true:false" type="text" @click="activation(scope.row,scope.$index)">挂起</el-button>
            <el-button v-if="scope.row.endTime.length<4 && scope.row.suspensionState == 2?true:false" type="text" @click="activation(scope.row,scope.$index)">激活</el-button>
            <el-button type="text" @click="deleteInstance(scope.row,scope.$index)">删除</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="操作" width="180" />
        <el-table-column prop="formName" label="名称" />
        <el-table-column prop="approver" label="审批人" width="180" />
        <el-table-column prop="systemSn" label="系统" width="180" />
        <el-table-column prop="starter" label="发起人" />
        <el-table-column prop="startTime" label="发起时间" />
        <el-table-column prop="endTime" label="结束" />
      </el-table>
      <div style="margin-top: 10px;display: flex;justify-content: center;">
        <el-pagination
          :current-page.sync="currentPage"
          :page-size="100"
          layout="prev, pager, next, jumper"
          :total="1000"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>

    </div>

    <el-dialog title="流程定位" :visible.sync="dialogTableVisible" />

    <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <img :src="src">
      </el-form>
    </el-dialog>

  </div>
</template>

<script>
export default {
  data() {
    return {
      //  列表数据源
      tableData: [

      ],
      // 当前分页位置
      currentPage: 1,
      // 搜索框
      input1: '',
      input2: '',
      dialogTableVisible: false,
      src: '',

      gridData: [{
        date: '',
        name: '',
        address: ''
      }],
      dialogFormVisible: false,
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '120px'

    }
  },
  created() {
    this.example()
  },
  methods: {
    //  实例列表
    example() {
      this.$Http.example({ pageNum: 1, pageSize: 10 }).then(res => {
        if (res.code === 200) {
          this.tableData = []
          res.result.data.forEach(item => {
            this.tableData.push({
              approver: item.approver,
              formName: item.formName,
              startTime: this.formatDate(item.startTime),
              starter: item.starter,
              systemSn: item.systemSn,
              suspensionState: item.suspensionState,
              picID: item.processInstanceId, //  track id
              processDefinitionId: item.processDefinitionId,
              endTime: item.endTime == null ? '未结束' : this.formatDate(item.endTime)
            })
          })
        } else {
          this.$message({
            type: 'error',
            message: res.message
          })
        }
      })
    },
    // 跟踪
    track(id, index) {
      //  打开图片有疑问
      this.src = `http://192.168.2.200:8888/rest/formdetail/image/${id.picID}`
      // this.dialogTableVisible = true
      this.dialogFormVisible = true
    },
    // 终止
    over(data, index) {
      this.$Http.over({ processInstanceId: data.picID }).then(res => {
        if (res.code === 200) {
          this.example()
        } else {
          this.$message({
            type: 'error',
            message: res.message
          })
        }
      })
    },
    // 挂起&激活
    activation(data, index) {
      this.$Http.activation({ suspensionState: data.suspensionState, id: data.picID }).then(res => {
        if (res.code === 200) {
          this.$message({
            type: 'success',
            message: res.message
          })
          this.example()
        } else {
          this.$message({
            type: 'error',
            message: res.message
          })
        }
      })
    },
    //  删除实例
    deleteInstance(data, index) {
      // console.log(data,index)
      this.$Http.deleteInstance({ id: data.picID }).then(res => {
        if (res.code === 200) {
          this.$message({
            type: 'success',
            message: res.message
          })
          this.example()
        } else {
          this.$message({
            type: 'error',
            message: res.message
          })
        }
      })
    },
    // 搜索 ?formName=123&userName=123&pageSize=10
    search() {
      console.log(this.input1, this.input2)
      this.$Http.search_fn({ formName: this.input1, userName: this.input2, pageSize: 10 }).then(res => {
        if (res.code === 200) {
          this.tableData = []
          console.log(res.result.data)
          res.result.data.forEach(item => {
            this.tableData.push({
              approver: item.approver,
              formName: item.formName,
              startTime: this.formatDate(item.startTime),
              starter: item.starter,
              systemSn: item.systemSn,
              suspensionState: item.suspensionState,
              picID: item.processInstanceId, //  track id
              processDefinitionId: item.processDefinitionId,
              endTime: item.endTime == null ? '未结束' : this.formatDate(item.endTime)
            })
          })
        } else {
          this.$message({
            type: 'error',
            message: res.message
          })
        }
      })
    },
    // 跳转在线编辑页面
    to_index() {
      this.$router.push('/index')
    },
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    }
  }
}
</script>
<style lang="scss" scoped>
  .centent {
    padding: 25px;

    .ipt_box {
      width: 100%;
      padding: 15px;
      display: flex;
      span{
        text-align: center;
        padding-top: 0.6%;
        margin-left: 2%;
      }
    }
  }
  .el-button--text{
    padding: 0;
  }
</style>
